<!-- 使用vue3的setup语法，typescript，以及scss封装一个可编辑表格，该表格接受一个 Array like 型的参数，自动渲染数据为表格，当表格编辑时，对应的数据发生变化。 -->
<template>
  <table>
    <thead>
      <tr>
        <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
        <td
          v-for="(cell, cellIndex) in row"
          :key="cellIndex"
          :contenteditable="isEditable(rowIndex, cellIndex)"
          @input="$event=>updateCell(rowIndex, cellIndex, ($event.target as HTMLElement).innerText)"
        >
          {{ cell }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script lang="ts">
export default {
  name: 'table-editable'
}
</script>

<script lang="ts" setup>
import { ref } from 'vue'

interface Row {
  [key: string]: string | number
}

const props = defineProps<{
  headers: (string | number)[]
  rows: (string | number)[][]
}>()
const isEditable = (rowIndex: number, cellIndex: number) => {
  // 根据rowIndex和cellIndex确定单元格是否可编辑
  // 如果可编辑，返回真，否则返回假
  const editableColumns = [1, 3, 5] // 示例可编辑列
  return editableColumns.includes(cellIndex)
}

const headers = ref(props.headers)
const rows = ref(props.rows)

const updateCell = (rowIndex: number, cellIndex: number, value: string) => {
  // 用新值更新rows数组中的相应单元格
  const updatedRows = [...rows.value] // 创建行数组的副本
  updatedRows[rowIndex] = { ...updatedRows[rowIndex], [headers.value[cellIndex]]: value } // 用新值更新相应的单元格
  rows.value = updatedRows // 用更新的rows数组更新rows ref
}
</script>

<style lang="scss">
table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #ddd;
}
</style>
